import React from "react";

/**
 * 类组件，获取 Props
 *    通过 this.props
 */
class Avatar extends React.Component {
  render() {
    console.log("Avatar Render this", this);
    const { person, size } = this.props;
    return (
      <div>
        <p>头像组件</p>
        <p>姓名：{this.props.person.name}</p>
        <p>年龄：{this.props.person.age}</p>
        <p>size: {this.props.size}</p>
      </div>
    );
  }
}

/**
 * 函数组件，获取 Props
 *    1. 没有 this
 *    2. 直接通过第一个形参获取 Props 即可
 */
function Profile({ person, size }) {
  return (
    <div>
      <p>Profile 组件</p>
      <p>姓名：{person.name}</p>
      <p>年龄：{person.age}</p>
      <p>size: {size}</p>
    </div>
  );
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App</h1>

        {/* 给子组件传递 Props 直接编写属性的方式即可 */}
        <Avatar person={{ name: "张三", age: 18 }} size={100} />

        <Profile person={{ name: "里斯", age: 18 }} size={200} />
      </div>
    );
  }
}

export default App;
